<template>
	<view class="hula-intro">
		<view class="top-background" :style="{'background-color' : hexToRgba(islandInfo.theme,0.3)}">
			
		</view>

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage()" style="margin-left: 30rpx;" type="left" size="30" :color="islandInfo.theme">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons @click="toShareIsland()" style="margin-right: 40rpx;" type="more-filled" size="30" :color="islandInfo.theme"></uni-icons>
				</view>
			</view>

			<view class="top-info">
				<view class="avatar">
					<image mode="aspectFill" :src="islandInfo.background"></image>
				</view>

				<view class="right-info">
					<view class="nickname" :style="{'color': islandInfo.theme }">{{islandInfo.name}}</view>
					<view class="summary" :style="{'color': islandInfo.theme }">{{islandInfo.description}}</view>
				</view>
			</view>

			<view class="bottom-info">
				<view class="user-data">
					<view class="item">
						<view class="item-top" :style="{'color': islandInfo.theme }">
							{{islandInfo.postCount}}
						</view>
						<view class="item-bottom" :style="{'color': islandInfo.theme }">
							创作
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">
						<view class="item-top" :style="{'color': islandInfo.theme }">
							{{islandInfo.userCount}}
						</view>
						<view class="item-bottom" :style="{'color': islandInfo.theme }">
							成员
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">
						<view class="item-top" :style="{'color': islandInfo.theme }">
							{{islandInfo.hulaCoin ? islandInfo.hulaCoin : 0}}
						</view>
						<view class="item-bottom" :style="{'color': islandInfo.theme }">
							hula币
						</view>
					</view>
				</view>

				<view class="user-follow" @click="toEncourage()"  :style="{'color': islandInfo.theme ,'border-color': islandInfo.theme }">
					<view @click="changeFixedStatus" v-if="!islandInfo.isFixed" class="follow">+常驻</view>
					<view @click="changeFollowStatus" v-else class="follow">赞助</view>
				</view>
			</view>

			<view class="content" style="min-height: 1200rpx;">

<!-- 				<view class="content-title" :style="{'color': islandInfo.theme }">
					绑定知桨
				</view> -->
				
				<view class="spaces" v-if="islandInfo.courses && islandInfo.courses.length > 0">
					<view class="space" v-for="course in islandInfo.courses" @click="gotoCourseDetail(course.id)">
						<view class="space-cover">
							<image mode="aspectFill" :src="course.cover"></image>
						</view>
						<view class="space-name">{{course.name}}</view>
					</view>
				</view>


				<view class="tabs">
					<view v-for="(item,index) in contentTypes">
						<view @click="changeContentTab(index)" class="tab" 
						:class="index == currentType ? 'tab-current': '' "
						:style="{'background-color':index == currentType ? islandInfo.theme: ''} ">
							<view>{{item}}</view>
							<!-- <view v-if="index == postPage.visibility" class="tab-line"></view> -->
						</view>
					</view>
				</view>

				<view class="user-list" v-if="currentType == 0">
					<view style="margin-bottom: 40rpx;" v-for="user in userList">
						<userInfoCard :userInfo="user.userInfo" :themeColor="islandInfo.theme"></userInfoCard>
					</view>
				</view>
				
				
<!-- 				<view class="wind-list" v-if="currentType == 1">
				
					<view class="wind" v-if="windList.length == 0">
						<view class="wind-tabs">
							<view v-for="(item,index) in windSordTypes">
								<view @click="changeWindTab(index)" class="tab" :class="index == windQueryInput.type ? 'tab-current': '' ">
									<view>{{windSordTypes[index]}}</view>
								</view>
							</view>
						</view>
						<view>暂无内容</view>
					</view>
				
					<view class="wind" v-for="(item, index) in windList" :key="index">
						<view v-if="index == 0" class="wind-tabs">
							<view v-for="(item,index) in windSordTypes">
								<view @click="changeWindTab(index)" class="tab" :class="index == windQueryInput.type ? 'tab-current': '' ">
									<view>{{windSordTypes[index]}}</view>
								</view>
							</view>
						</view>
				
						<view class="wind-date">{{item.gmtCreate}} {{ windTypes[item.type] }}</view>
				
						<view v-if="item.type <= 2">
							<view class="wind-content" v-html="item.postInfoVO.content"></view>
							<view class="wind-pictures" v-if="item.postInfoVO.pictures && item.postInfoVO.pictures.length > 0">
								<view v-for="picture in item.postInfoVO.pictures" class="picture"
									@tap="ViewImage(picture,item.postInfoVO.pictures)">
									<image mode="aspectFill" :src="picture" />
								</view>
							</view>
						</view>
				
						<view v-if="item.type <= 5 && item.type >= 4">
							<view class="wind-content" v-html="item.commentListVO.content"></view>
							<view class="wind-pictures"
								v-if="item.commentListVO.pictures && item.commentListVO.pictures.length > 0">
								<view v-for="picture in item.commentListVO.pictures" class="picture"
									@tap="ViewImage(picture,item.commentListVO.pictures)">
									<image mode="aspectFill" :src="picture" />
								</view>
							</view>
						</view>
				
						<view v-if="item.type == 6">
							<view class="wind-content" v-html="item.talkListVO.content"></view>
						</view>
					</view>
				</view>

				<view class="hula-info"  v-if="currentType == 2">
					<view class="info-item">
						<view class="title">
							<view>候浪目标</view>
						</view>
						<view class="info-card">
							{{userHula.goal}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>执行情况</view>
						</view>
						<view class="info-card">
							匹配飓风中
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>当前状态</view>
						</view>
						<view class="info-card">
							{{userHula.statusNow}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>期望状态</view>
						</view>
						<view class="info-card">
							{{userHula.statusWish}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>向导期望</view>
						</view>
						<view class="info-card">
							{{userHula.description}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>能力表现</view>
						</view>
						<view class="info-card">
							{{userHula.ability}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>兴趣取向</view>
						</view>
						<view class="info-card">
							爱好：{{userHula.hobby}},游戏：{{userHula.games}}
						</view>
					</view>
					
					<view class="info-item">
						<view class="title">
							<view>关键问题</view>
						</view>
						<view class="info-card">
							高富帅
						</view>
					</view>
					
					<view style="width: 690rpx;height: 120rpx;text-align: center;line-height: 120rpx;
					color: #144C5D;background-color: #5DACB1;margin-left: 30rpx;border-radius: 20rpx;font-size: 36rpx;font-weight: bold;color: #FFFFFF;">
						成为ta的候浪者
					</view>
				</view>
			 -->
			</view>
		</view>
		
		<uni-popup ref="shareOptions" type="bottom">
			<view class="popup">
				<view class="top">
					<view class="title">分享浪屿</view>
					<view class="close">
						<!-- <image mode="aspectFill" :src="option.cover"></image> -->
					</view>
				</view>
				<view class="options">
					<view class="option-list" style="overflow: scroll;">
						<view v-for="option in options_share" @click="islandShare(index)">
							<view class="option">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
					<view class="option-list">
						<view v-for="(option,index) in options_edit" @click="islandEdit(index)">
							<view class="option"
								v-if="index > 1 || index==0 && !islandInfo.isFixed || index==1 && islandInfo.isFixed">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="moneyInput" type="bottom">
			<view class="modal-box">
				<view class="modal-title">赞赏提示</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">赞赏任意金额</text>
						<input type="digit" v-model="order.money" placeholder="请输入您想赞赏的金额" />
					</view>
				</view>
		
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
	import { forEach } from '../../plugin/luch-request/utils';
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				islandInfo:{},
				
				userList:[],
				userPage:{
					pageNow:1,
					pageSize:20,
					total:0,
					islandId:null
				},
				islandUserRoles: [{
					value: 0,
					label: "成员",
				}, {
					value: 1,
					label: "候浪者"
				}, {
					value: 2,
					label: "浪者"
				}, {
					value: 3,
					label: "飓风"
				}, {
					value: 4,
					label: "封禁"
				}, ],
				
				
				contentTypes: ["成员", "精选", "历史决策"],
				currentType: 0,
				
		
				order:{},
				
				
				options_share: [{
					text: "生成长图",
					cover: "https://www.cdn.kxcdedu.top/image/default/898191511DDA4A31A670DCD340C90B1D-6-2.png"
				}, {
					text: "微信好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/FF9B3803D26D4832BBB5CF07B7555961-6-2.png"
				}, {
					text: "朋友圈",
					cover: "https://www.cdn.kxcdedu.top/image/default/C43AB7C5243F440989F25AB10F7465A5-6-2.png"
				}, {
					text: "qq好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/ABB37A391BEB433FB3107B5F959B24CC-6-2.png"
				}, {
					text: "复制链接",
					cover: "https://www.cdn.kxcdedu.top/image/default/9E914679EB8B40479B43166F249A947D-6-2.png"
				}],
				
				options_edit: [{
					text: "设为常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/CA285DEBC1A84F47BCAEA6079C7BB463-6-2.png"
				}, {
					text: "取消常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/F5EC5A1B5A924671AE6A5E6FCDB59151-6-2.png"
				}, {
					text: "退出浪屿",
					cover: "https://www.cdn.kxcdedu.top/image/default/C8CE49E69B8144BA8588D2DFC2668302-6-2.png"
				}, {
					text: "赞助浪屿",
					cover: "https://www.cdn.kxcdedu.top/image/default/B584D91E8C7D45D3A293200F8D00FD5C-6-2.png"
				}],
				
				
				paddingTop: null
			};
		},
		onReachBottom() {
			switch(this.currentType){
				case 0:
					this.userPage.pageNow++
					this.$api.pageIslandUser(this.userPage).then(res => {
						forEach(res.data.rows,(item)=>{
							item.userInfo.summary = this.islandUserRoles[item.role].label
						})
						if(res.data.rows.length > 0){
							this.userList = [...this.userList, ...res.data.rows]
						}
					})
					break;
				case 1:
					break;
				case 2:
					break;
				case 3:
					break;
			}
			
		},
		onLoad(options) {
			if(options.islandId){
				this.islandInfo.id  =options.islandId
				this.userPage.islandId = options.islandId
				this.getIslandInfo()
				this.pageUsers()
			}
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			const menuButton = uni.getMenuButtonBoundingClientRect();
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data;
				})
			},
			pageUsers() {
				this.userPage.pageNow = 1
				this.$api.pageIslandUser(this.userPage).then(res => {
					forEach(res.data.rows,(item)=>{
						item.userInfo.summary = this.islandUserRoles[item.role].label
					})
					this.userList = res.data.rows
					this.userPage.total = res.data.total
				})
			},
			
			changeFollowStatus() {
				this.$api.changeUserFollowStatus({
					id: this.userInfo.id
				}).then(() => {
					console.log("改变元素属性")
					this.userInfo.isFollowed = !this.userInfo.isFollowed
				})
			},
			
			
			changeContentTab(index){
				this.currentType = index
				switch(index){
					case 0 :
						this.pageUsers()
						break;
					case 1 :
						break;
					case 2 :
						break;
					case 3 :
						break;
				}
			},
			
			islandEdit(optionIndex) {
				this.$refs.shareOptions.close("bottom")
				switch (optionIndex) {
					case 0:
						this.$api.fixIslandOrCancel({
							islandId: this.islandInfo.id
						}).then(() => {
							this.islandInfo.isFixed = true
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 1:
						this.$api.fixIslandOrCancel({
							islandId: this.islandInfo.id
						}).then(() => {
							this.islandInfo.isFixed = false
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 2:
						uni.showToast({
							icon: 'none',
							title: "功能还未开发嘿嘿",
						})
						break;
					case 3:
						this.$refs.moneyInput.open("bottom")
						break;
				}
			},
			
			ViewImage(current, urls) {
				uni.previewImage({
					urls,
					current
				});
			},
			
			
			toEncourage(){
				this.$refs.moneyInput.open("bottom")
			},
			
			
			modalConfirm(){
				if(this.order.money == null || this.order.money == 0){
					uni.showModal({
						title: "提示",
						content: "输入金额不能为零或者为空"
					})
					return
				}
				this.order.productId = this.islandInfo.id
				this.order.productType = 2
				
				// #ifdef H5
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_MWEB"
				}).then(res => {
					console.log(res.data.data.mwebUrl)
					window.location.href = res.data.data.mwebUrl
				})
				// #endif
				
				// #ifdef APP
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_APP"
				}).then(res => {
					console.log(res.data.data)
					let orderInfo = {
						"appid": res.data.data.appId, // 应用ID（AppID）
						"partnerid": "1608185528", // 商户号（PartnerID）
						"prepayid": res.data.data.prepayId, // 预支付交易会话ID
						"package": res.data.data.package, // 固定值
						"noncestr": res.data.data.nonceStr, // 随机字符串
						"timestamp": res.data.data.timeStamp, // 时间戳（单位：秒）
						"sign": res.data.data.paySign, // 签名，这里用的 MD5 签名
					}
				
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				// #endif
				
				// #ifdef MP-WEIXIN
				this.order.payType = "WXPAY_MINI"
				
				this.$api.purchaseOrder(this.order).then(res => {
					let orderInfo = {
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						sign: res.data.paySign, // 签名，这里用的 MD5 签名
					}
									
					uni.requestPayment({
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: "MD5",
						paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						success(res) {
							uni.showToast({
								title: '感谢',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				
			
				// #endif
				
				
				
				
				
				this.$refs.moneyInput.close("bottom")
			},
			modalCancel(){
				this.$refs.moneyInput.close("bottom")
			},
			
			
			
			
			gotoCourseDetail(id) {
				uni.navigateTo({
					url: '/pages_being/course/course-detail?courseId=' + id
				});
			
			},
			
			toShareIsland() {
				this.$refs.shareOptions.open('bottom')
			},
			islandShare() {
				uni.showToast({
					icon: "none",
					title: "开发ing"
				})
			},
			
			
			
			
			toBackPage(){
				uni.navigateBack()
			},
			
			hexToRgba(hex, opacity) {
				if (hex) {
					return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
						parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"
				}
			},
		},
		filters:{
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			}
		}
	}
</script>

<style scoped lang="scss">
	.hula-intro {


		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 600rpx;
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;



			.back-arrow {
				width: 100%;

				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif

				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.top-info {
				width: 690rpx;
				margin-left: 30rpx;

				margin-top: 80rpx;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;


				.avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					overflow: hidden;
					border: solid #FFFFFF;
				}

				.right-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 500rpx;


					.nickname {
						color: white;
						font-size: 40rpx;
					}

					.summary {
						font-size: 28rpx;
						margin-top: 10rpx;
						color: #e1e1e1;
					}

				}
			}


			.bottom-info {
				width: 690rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.user-data {
					display: flex;
					flex-direction: row;
					font-size: 26rpx;
					color: #eeeeee;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						width: 150rpx;
						height: 80rpx;

						.item-top {
							font-size: 36rpx;
							color: #ffffff;
						}

						.item-bottom {
							font-size: 28rpx;
							color: #e1e1e1;
						}
					}

					.split-line {
						width: 3rpx;
						height: 60rpx;
						background-color: #d1d1d1;
					}
				}

				.user-follow {
					border: solid #FFFFFF;
					color: #FFFFFF;
					padding: 10rpx 50rpx;
					border-radius: 40rpx;
				}
			}




			.content {
				width: 100%;
				background-color: #F9F9F9;
				border-radius: 40rpx;
				margin-top: 20rpx;
				padding-bottom: 100rpx;
				
				.content-title{
					width: 690rpx;
					margin: 30rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.spaces {

					display: flex;
					flex-direction: row;

					overflow-x: scroll;
					width: 710rpx;
					height: 245rpx;
					
					margin-left: 30rpx;
					margin-top: 40rpx;

					.space {
						flex-shrink: 0;
						width: 260rpx;
						height: 230rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;
						
						display: flex;
						flex-direction: column;
						
						.space-cover{
							width: 260rpx;
							height: 160rpx;
							border-radius: 20rpx 20rpx 0 0;
							overflow: hidden;
						}
						
						.space-name{
							
							margin: 10rpx;
							font-size: 28rpx;
							
							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

					}
				}




				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;
					margin-top: 30rpx;

					.tab {
						margin-left: 30rpx;
						color: gray;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						padding: 5rpx 25rpx;

						background-color: #FFFFFF;
						border-radius: 15rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #FFFFFF;
						font-weight: bold;
					}
				}

				.user-list {
					margin-top: 30rpx;
					width: 670rpx;
					margin-left: 40rpx;

				}
			
			
				.wind-list {
					margin-top: 30rpx;
				
				
					.wind {
						display: flex;
						flex-direction: column;
						width: 630rpx;
						padding: 30rpx;
						margin-bottom: 30rpx;
						background-color: #FFFFFF;
						margin-left: 30rpx;
						
						
						.wind-tabs {
							display: flex;
							flex-direction: row;
							align-items: center;
						
							.tab {
								margin-right: 20rpx;
								color: gray;
								height: 60rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
							}
						
							.tab-current {
								color: #2c2c2c;
								font-weight: bold;
							}
						
						
						}
						
				
						.wind-date {
							color: gray;
							font-size: 24rpx;
						}
				
						.wind-content {
							margin-top: 10rpx;
							
							// /deep/p {
							// 	margin: 20rpx 0;
							// }
							
							
							/deep/img {
								width: 100%;
							}
						}
				
						.wind-pictures {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							margin-top: 20rpx;
				
							width: 610rpx;
							flex-wrap: wrap;
				
							.picture {
								width: 195rpx;
								height: 195rpx;
								border-radius: 10rpx;
								overflow: hidden;
							}
						}
				
					}
				}
				
				.hula-info{
					display: flex;
					flex-direction: column;
					
					.info-item {
						width: 650rpx;
						
						background-color: #ffffff;
						border-radius: 20rpx;
						padding: 20rpx;
						
						margin-left: 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex-direction: column;
					
						.title {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
							width: 670rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
						}
					
						.info-card {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}

		}
	}
	
	.popup {
		padding: 40rpx 30rpx 60rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		min-height: 200rpx;
	
		.top {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
	
			.title {
				font-weight: bold;
			}
	
			.close {}
		}
	
		.options {
			display: flex;
			flex-direction: column;
			margin-top: 10rpx;
	
			.option-list {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
	
				.option {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-right: 30rpx;
	
					.img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
	
					.text {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
	
	
			}
	
		}
	}
	
	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 600rpx;
	
	
		padding: 40rpx;
		border-radius: 20rpx;
		background: white;
	
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		text-align: left;
	
	
		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	
		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;
	
	
			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;
	
				.modal-key {
					display: block;
	
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
	
			}
	
			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;
	
				line-height: 60rpx;
			}
	
		}
	
		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;
	
			text-align: center;
		}
	
		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;
	
			width: 40%;
		}
	
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
